<template>
  <div class="hurgone">
    <div class="title">
      <p class="title__bd">{{title}}</p>
      <router-link :to="url">
        <p class="title__ft">查看全部&nbsp;&nbsp;&gt;</p>
      </router-link>
    </div>
    <ul>
      <router-link
        tag="li"
        class="item border-bottom"
        v-for="(item, index) in startTeachers"
        :key="index"
        to
        @click.native.prevent="$emit('link-to', {vid: item.vid, type: item.data_type})"
      >
        <img class="item-img" :src="item.imgUrl">
        <div class="item-info">
          <p class="item-info__title" v-text="item.title"></p>
          <p class="item-info__desc" v-text="item.desc"></p>
          <div class="item-info__ft">
            <span class="item-num">
              {{item.num}}
              <span v-text="numUnit"></span>
            </span>
            <span class="item-price">
              <span class="item-price__discounts">
                <small class="yen">&yen;</small>
                {{item.price_discounts}}
              </span>
              <del class="item-price__original" v-if="item.price_original">{{item.price_original}}</del>
            </span>
          </div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeItemOneBig",
    props: {
      title: {
        type: String,
        default: ""
      },
      list: {
        type: Array,
        default: () => []
      },
      numUnit: {
        type: String,
        default: ""
      },
      url: {
        type: String | Object,
        default: ""
      }
    },
    computed: {
      startTeachers() {
        return this.list;
      }
    }
  };
</script>
<style lang="less" scoped>
  @import "~less/mixins.less";
  .hurgone {
    position: relative;
    padding-bottom: 5px;
    .home-border-bottom();
  }
  .title {
    .title();
    margin-top: 20px;
    font-weight: 600;
  }
  .item {
    position: relative;
    padding-bottom: 1px;
    .box-shadow();
    &:not(:first-child) {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    &:last-child {
    }
    &-img {
      width: 100%;
      height: 200px;
      object-fit: cover;
      border-radius: 10px 10px 0 0;
      background-color: #2e988f;
    }
    &-info {
      line-height: 16px;
      &__title {
        margin-top: 8px;
        margin-bottom: 10px;
        margin-left: 5px;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
      }
      &__desc {
        margin-bottom: 10px;
        margin-left: 5px;
        font-size: 11px;
        color: #acacac;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      &__ft {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        box-sizing: border-box;
        padding: 0 10px;
        line-height: 16px;
        .item-num {
          font-size: 11px;
          color: #acacac;
        }
        .item-price {
          .yen {
            font-size: 10px;
          }
          &__discounts {
            margin: 0 5px;
            font-size: 14px;
            color: #dc376d;
            font-weight: 600;
          }
          &__original {
            font-size: 10px;
            color: #acacac;
          }
        }
      }
    }
  }
</style>
